<template>
  <el-drawer
    v-model="visible"
    :close-on-click-modal="true"
    :show-close="false"
    title="选择素材"
    modal-class="material-drawer"
    size="1215px"
  >
    <Material :type="type" ref="materialRef" :is-select="true" :limit="limit" />
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">提交</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { reactive, ref, shallowRef, toRefs, nextTick } from 'vue';
import Material from './index.vue'

const props = defineProps({
  type: {
    type: String,
    default: '1'
  },
  limit: {
    type: Number,
    default: 1
  }
})
const { limit, type } = toRefs(props);
const emits = defineEmits('submit');
let visible = shallowRef(false);
const materialRef = ref();

const open = (list) => {
  visible.value = true
  nextTick(() => {
    materialRef.value.selectedList = JSON.parse(JSON.stringify(list.filter(v => v)))
    materialRef.value.refresh()
  })
}

function handleClose () {
  visible.value = false
}
function handleSubmit () {
  emits('submit', materialRef.value.selectedList)
  handleClose()
}

defineExpose({ open })
</script>

<style lang="scss" scoped>
.selectCrowd{
  span {
    color: #409eff;
    cursor: pointer;
    font-weight: 500;
  }
  p {
    height: 30px;
    line-height: 30px;
    margin: 0;
    color: #666666;
    font-size: 12px;
  }
}
.couponBox {
  .info {
    color: #666666;
    font-size: 12px;
    margin: 0;
  }
  .selectCoupon {
    cursor: pointer;
    color: #409eff;
    font-size: 14px;
    font-weight: 500;
  }
}
</style>
